@import "reset.css";
@import "../font/iconfont.css";

html,body,#page{
    height: 100%;
}

#page{
    display: flex;
    flex-direction: column;
    max-width: 750px;
    margin: 0 auto;
}

/*顶部*/
#header_top{
    height: .64rem;
    display: flex;
    background-color: #ff6040;
    padding: .45rem .12rem .32rem .33rem;
    color: #ffdfd8;
    font-size: .3rem;
    align-items: center;
    justify-content: space-between;
    p{
        span{
            &.iconfont{
                font-size: .3rem;
                color: #ffdfd8;
            }            
        }
        &:nth-child(1){
            margin-left: 3.23rem;
            
        }
        &:nth-child(2){
            width: 1.74rem;
            height: .64rem;
            border: 1px solid #ff8a6f;
            border-radius: .4rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
            i{
                width: 1px;
                height: 0.37rem;
                background-color: #ff896e;
                position: absolute;
            }
        }
        
    }
}

/*搜索*/
form{
    height: .85rem;
    background: linear-gradient(#ff694d,#ff897e);
    input{
        width: 7rem;
        height: .64rem;
        border: .02rem solid #e6e6e6;
        border-radius: .1rem;
        margin-left: .13rem;
        padding-left: .2rem;
        &::placeholder{
            font-size: .26rem;
            color: #999999;
        }
    }
}

/*列表*/
main{
    background: #f0f0f0;
    display: flex;
    justify-content: space-between;  
    overflow: auto;
    .left{
        overflow: auto;        
        width: 2.35rem;
        padding: .6rem 0 .3rem 0;
        background-color: #fff;
        ul{
            overflow: auto; 
            height: 11.76rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            li{
                &:nth-child(1){
                    margin-top: 0;
                }
                a{
                    color: #9f9f9f;
                    font-size: .24rem;
                    &.cur{
                        color: #ff6040;
                        font-size: .3rem;
                    }
                }
            }
        }
    }
    .right{
        overflow: auto; 
        width: 4.85rem;
        padding-right: .2rem;
        box-sizing: border-box;
        div{
            background-color: #fff;
            width: 4.64rem;
            height: 4.36rem;
            padding: .2rem 0 0 .2rem;
            box-sizing: border-box;
            margin-top: .3rem;
            h2{
                font-size: .3rem;
                height: .3rem;
                color: #333333;
            }
            ul{
                
                li{
                    float: left;
                    width: 1.28rem;
                    margin: .21rem .2rem 0 0;
                    img{
                        width: 100%;
                    }
                    p{
                        font-size: .22rem;
                        color: #9f9f9f;
                        margin-top: .1rem;
                        text-align: center;
                        height: .22rem;
                    }
                }
            }
        }
    }
}



/*尾部*/
footer{
    height: 1.66rem;
    border-top: 1px solid #cccccc;
    padding: .14rem 0 .16rem 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;   
    ul{
        display: flex;
        justify-content: space-around;
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            &.cur{
                color: #ff6040;
            }
            color: #acacac;
            font-size: .18rem;
            span{
                &.iconfont{
                    color: 999999;
                    font-size: .4rem;
                }
            }
            
        }
    }
    p{
        width: 2.7rem;
        height: .1rem;
        background-color: #000;
        border-radius: .05rem;
        margin-left: 2.4rem;
    }
}